import React, { Component, useState, useEffect, useRef } from 'react';
import {
  Form,
  Input,
  Table,
  Row,
  Col,
  Button,
  Divider,
  Popconfirm,
  DatePicker,
  Icon,
  Modal,
} from 'antd';
import Add from './add';
import View from './view';
import Edit from './edit';
import { connect } from 'dva';
import moment from 'moment';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
const { MonthPicker, RangePicker } = DatePicker;
const Index = ({
  dispatch,
  form,
  dataSource,
  total,
  isRefresh,
}: {
  dispatch: (type: any) => void;
  form: any;
  dataSource: Array<any>;
  total: number;
  isRefresh: boolean;
}) => {
  const { getFieldDecorator } = form;

  const [page, setpage] = useState(1);
  const [size, setsize] = useState(10);
  const [startDate, setstartDate] = useState(0);
  const [endDate, setendDate] = useState(Number(moment(Date.now()).endOf('day')));
  const [addVisible, setaddVisible] = useState(false);
  const [viewVisible, setviewVisible] = useState(false);
  const [editVisible, seteditVisible] = useState(false);
  let addRef: any = useRef(null);
  let viewRef: any = useRef(null);
  let editRef: any = useRef(null);

  const columns: Array<any> = [
    {
      title: '序号',
      align: 'center',
      render: (text: any, record: any, index: number) => `${index + 1}`,
    },
    {
      title: '时间',
      dataIndex: 'dealTime',
      align: 'center',
      render: (text: any) => {
        return (
          <>
            <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>
          </>
        );
      },
    },
    {
      title: '酒类',
      dataIndex: 'wineName',
      align: 'center',
    },
    {
      title: '付款人',
      dataIndex: 'payer',
      align: 'center',
    },
    {
      title: '收款人',
      dataIndex: 'payee',
      align: 'center',
    },
    {
      title: '支付金额',
      dataIndex: 'payAmount',
      align: 'center',
    },
    {
      title: '数量',
      dataIndex: 'qty',
      align: 'center',
    },
    {
      title: '单位',
      dataIndex: 'unitDesc',
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'comments',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'operate',
      align: 'center',
      render: (text: any, record: any) => {
        return (
          <>
            <span
              onClick={() => {
                seteditVisible(true);
                dispatch({
                  type: 'pay/view',
                  payload: record,
                });
              }}
            >
              <a>修改</a>
            </span>
            <Divider type="vertical" />
            <Popconfirm
              title="你确定要删除嘛？"
              okText="Yes"
              cancelText="No"
              onConfirm={() => {
                dispatch({
                  type: 'pay/delete',
                  payload: record,
                });
              }}
            >
              <span>
                <a>删除</a>
              </span>
            </Popconfirm>
            {/* <Divider type="vertical" />
            <span
              onClick={() => {
                setviewVisible(true);
                dispatch({
                  type: 'pay/view',
                  payload: record,
                });
              }}
            >
              <a>查看</a>
            </span> */}
          </>
        );
      },
    },
  ];

  useEffect(() => {
    // handleSearch();
    dispatch({
      type: 'pay/reFresh',
      payload: true,
    });
  }, []); //page, size, startDate, endDate
  useEffect(() => {
    if (isRefresh) {
      handleSearch();
    }
  }, [isRefresh]);

  const handleReset = () => {
    form.resetFields();
  };
  const handleaddOk = () => {
    // setaddVisible(false);
    addRef.handleSubmit();
  };

  const handleaddCancel = () => {
    setaddVisible(false);
  };
  const handleviewOk = () => {
    setviewVisible(false);
  };

  const handleviewCancel = () => {
    setviewVisible(false);
  };
  const handleeditOk = () => {
    editRef.handleSubmit();
  };

  const handleeditCancel = () => {
    seteditVisible(false);
  };

  const handleSearch = () => {
    form.validateFieldsAndScroll((err: any, values: any) => {
      dispatch({
        type: 'pay/list',
        payload: {
          page,
          size,
          startDate,
          endDate,
          payer: values.payer,
          payee: values.payee,
        },
      });
    });
  };
  return (
    <PageHeaderWrapper>
      <div style={{ padding: '12px 24px', background: '#fff', marginBottom: '6px' }}>
        <Form layout="inline">
          <Form.Item label="付款人">{getFieldDecorator('payer', {})(<Input />)}</Form.Item>
          <Form.Item label="收款人">{getFieldDecorator('payee', {})(<Input />)}</Form.Item>
          <Form.Item label="时间">
            {getFieldDecorator('staffId')(
              <RangePicker
                ranges={{
                  今日: [moment(), moment()],
                  当月: [moment().startOf('month'), moment().endOf('month')],
                }}
                format="YYYY/MM/DD"
                onChange={([start, end]) => {
                  if (!start && !end) {
                    setstartDate(0);
                    setendDate(Date.now());
                  } else {
                    setstartDate(Number(start));
                    setendDate(Number(end));
                  }
                }}
              />,
            )}
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              onClick={() => {
                dispatch({
                  type: 'pay/reFresh',
                  payload: true,
                });
              }}
              style={{ marginRight: '14px' }}
            >
              搜索
            </Button>
            <Button
              type="primary"
              onClick={() => {
                setaddVisible(true);
              }}
            >
              新增
            </Button>
          </Form.Item>
        </Form>
      </div>
      <Table
        bordered
        columns={columns}
        dataSource={dataSource}
        loading={isRefresh}
        size="middle"
        pagination={{
          pageSize: size,
          showSizeChanger: true,
          pageSizeOptions: ['5', '10', '20', '30'],
          showQuickJumper: true,
          current: page,
          total: total,
          onChange: (page: any, pageSize: any) => {
            setpage(page);
          },
          onShowSizeChange: (current: any, size: any) => {
            setsize(size);
          },
        }}
      />
      <Modal
        title="新增"
        visible={addVisible}
        destroyOnClose
        centered
        width={550}
        onOk={handleaddOk}
        onCancel={handleaddCancel}
      >
        <Add
          close={() => {
            setaddVisible(false);
          }}
          submit={(view: any, data: any) => {
            dispatch({
              type: 'pay/add',
              payload: data,
            });
          }}
          wrappedComponentRef={(form: any) => {
            addRef = form;
          }}
        />
      </Modal>
      <Modal
        title="查看"
        width={550}
        destroyOnClose
        visible={viewVisible}
        onOk={handleviewOk}
        onCancel={handleviewCancel}
      >
        <View
          close={() => {
            setviewVisible(false);
          }}
          wrappedComponentRef={(form: any) => {
            viewRef = form;
          }}
        />
      </Modal>
      <Modal
        title="修改"
        width={550}
        destroyOnClose
        visible={editVisible}
        onOk={handleeditOk}
        onCancel={handleeditCancel}
      >
        <Edit
          close={() => {
            seteditVisible(false);
          }}
          submit={(view: any, data: any) => {
            console.log(data, 9999);
            dispatch({
              type: 'pay/edit',
              payload: { ...view, ...data },
            });
          }}
          wrappedComponentRef={(form: any) => {
            editRef = form;
          }}
        />
      </Modal>
    </PageHeaderWrapper>
  );
};

export default connect(({ pay }: any) => ({
  dataSource: pay.list,
  total: pay.total,
  isRefresh: pay.isRefresh,
}))(Form.create()(Index));
